<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>

<body>
    <div id="app">
        <book></book>
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>
    const { createApp, h,mergeProps } = Vue;

    const one = {
        class: 'foo',
        style:"width:200px;height:200px;",
        onClick: handlerA,
    }

    const two = {
        class: {"bar":true,"cls":true},
        style:"background-color:red",
        onClick: handlerB,
    }

    // mergeProps是合并对象的属性值的（相同属性，把值合在一起）,只针对class，style，onXxxxx 属性

    const obj = mergeProps(one,two);

    console.log("obj",obj);

    function handlerA(){
        console.log("handleA");
    }

    function handlerB(){
        console.log("handleB");
    }

    let book = {
        render(){
            return h("div",obj,"我是div")
        }
    }
    

    // 1、创建一个应用
    let app = createApp({
        data() {
            return {
                msg: "hi"
            }
        },
        components: {
            book
        }
    });



    // 2、把应用进行渲染（和模板进行关联）
    app.mount("#app");


</script>